import 'package:flutter/material.dart';

class LayoutCase extends StatelessWidget {
  const LayoutCase({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 300,
          height: 100,
          decoration: const BoxDecoration(
            color: Colors.green,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 主轴
            crossAxisAlignment: CrossAxisAlignment.center, // 交叉轴
            children: [
              Image.asset('assets/open_eyes.png', width: 50, height: 50),
              Image.asset('assets/open_eyes.png', width: 50, height: 50),
              Image.asset('assets/open_eyes.png', width: 50, height: 50),
            ],
          ),
        ),
        Container(
          decoration: const BoxDecoration(
            color: Colors.green,
          ),
          child: Column(
            children: [
              Image.network(
                'https://yanxuan-item.nosdn.127.net/72e734dd1a4d35ce650afebdaa600b57.png',
                width: 200,
                height: 200,
              ),
              const SizedBox(height: 10), // 通过盒子设置间距
              const Text('美妆效果嘎嘎不卡粉末面刷'),
              // 嵌套个 padding 组件也可以设置间距
              const Padding(
                padding: EdgeInsets.symmetric(vertical: 10),
                child: Text('¥99.90'),
              ),
            ],
          ),
        ),
        Container(
          width: double.infinity, // 宽度占满 100%
          height: 120, // 高度固定 120
          decoration: const BoxDecoration(
            color: Colors.yellow,
          ),
          child: Row(
            children: [
              Image.network(
                'https://yanxuan-item.nosdn.127.net/72e734dd1a4d35ce650afebdaa600b57.png',
                height: double.infinity,
              ),
              const SizedBox(width: 10),
              Expanded(
                flex: 1, // 占满主轴剩余空间，类似鸿蒙 .layoutWeight(1)
                child: Container(
                  height: double.infinity, // 100%
                  color: Colors.red,
                  child: const Text('右侧布局'),
                ),
              )
            ],
          ),
        ),
      ],
    );
  }
}
